<template>
    <!-- 商品抖音素材组件 -->
    <div v-loading="loading" element-loading-text="加载中">
           <!-- 素材列表dialog -->
        <div class="margin-container-list">
            <div class="table-container scroll-layer-box">
                <el-table :data="materialList" v-loading="listLoading" element-loading-text="加载中">
                <el-table-column min-width="150px" label="图片" prop="imageUrl">
                    <template slot-scope="scope">
                        <img style="width:80px;height:80px;border:none;" :src="scope.row.imageUrl">  
                    </template>
                </el-table-column>
                <el-table-column width="150px" label="图片类型" prop="imageType">
                    <template slot-scope="scope">
                    {{ imageTypeList[scope.row.imageType] }}
                    </template>
                </el-table-column>
                <el-table-column width="150px" label="sku规格描述" prop="skuDetail"></el-table-column>
                <el-table-column width="150px" label="审核状态" prop="auditStatus">
                    <template slot-scope="scope">
                    {{ auditStatusList[scope.row.auditStatus] }}
                    <template v-if="scope.row.auditStatus == 4">
                    <el-tooltip placement="top" effect="light">
                        <div slot="content" class="scroll-layer-box pad-r-10" style="max-height: 300px; height: auto;">
                        <div class="mar-b-5"><span>{{ scope.row.auditFailReason }}</span></div>
                        </div>
                        <el-button type="text" icon="el-icon-warning font-24 font-black"></el-button>
                    </el-tooltip>
                    </template>
                    </template>
                </el-table-column>
                <el-table-column width="150px" label="操作">
                    <template slot-scope="scope">
                    <el-button type="text" size="medium" @click="deleteGoodsMaterialById(scope.row)">从列表中删除</el-button>
                    </template>
                </el-table-column>
                </el-table>
            </div>
    
            <div slot="footer" class="dialog-footer text-align-c small">
                <el-button type="primary" @click="cleanGoodsMaterial">清空素材</el-button>
                <el-button type="primary" @click="doCancel">关闭</el-button>
            </div>
        </div>  
    </div>
  </template>
  
  <script>
    import { getMaterialListByGoodId, deleteGoodsMaterialById, clearGoodsMaterial } from '@/api/goods/goodsMaterial'
    
    export default {
      props: {
        showFlag: {
          type: Boolean,
          default() {
            return false
          }
        },
        // 店铺id
        shopId: {
          type: String
        },
        // 商品对象
        goodsObj: {
          type: Object
        }
      },
      watch: {
        showFlag(val) {
          if (val) {
            this.init()
          }
        }
      },
    
      data() {
        return {
          materialList: [],
          loading: false,
          auditStatusList: {
            1: '等待审核',
            2: '审核中',
            3: '通过',
            4: '拒绝'
          },
          imageTypeList: {
            1: '主图',
            2: '详情图',
            3: 'sku图片'
          }
        }
      },
      created() {
        this.init()
      },
      methods: {
        // 初始化
        init() {
          this.materialList = []
          this.loading = true
          getMaterialListByGoodId(this.goodsObj.goodsId).then(response => {
            this.loading = false
            if (response.isError) return
            this.materialList = response.data
          })
        },
        // 取消事件
        doCancel() {
          this.$emit('callback', false)
        },
        // 从列表中移除
        deleteGoodsMaterialById(row) {
          this.$confirm('从列表移除图片,不会将图片从平台素材中心里删除，功能仅适用于列表中的图片在平台素材中心已失效或不存在，需要仅移除当前列表中图片记录', '提示', {
            confirmButtonText: '确定移除',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteGoodsMaterialById(row.thirdGoodMaterialId).then(response => {
              if (response.isError) return
              this.init()
              this.$message({ type: 'success', message: '删除成功' })
            })
          }).catch(() => {
            this.$message({ type: 'info', message: '已取消' })
          })
        },
        // 移除商品所有素材
        cleanGoodsMaterial() {
          this.$confirm('清空素材,会将当前商品上传至平台素材中心的所有图片彻底删除，删除后需要重新更新素材', '提示', {
            confirmButtonText: '确定清空',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            clearGoodsMaterial(this.shopId, this.goodsObj.goodsId).then(response => {
              if (response.isError) return
              this.$message({ type: 'success', message: '清空素材成功' })
            })
          }).catch(() => {
            this.$message({ type: 'info', message: '已取消' })
          })
        }
      }
    }
  </script>
  
  <style lang="less" scoped>
  
  </style>